<script setup>
  import { ref, onMounted, onUnmounted, h } from 'vue'
  import Top from './components/top/index.vue'
  import Tourist from './components/tourist/index.vue'
  import Gender from './components/gender/index.vue'
  import Age from './components/age/index.vue'
  import Map from './components/map/index.vue'
  import Line from './components/line/index.vue'
  import Rank from './components/rank/index.vue'
  import Year from './components/year/index.vue'
  import Couter from './components/couter/index.vue'

  const screenContent = ref()

  onMounted(() => {
    handleResize()
    // 监听窗口变化
    window.addEventListener('resize', handleResize)
  })
  onUnmounted(() => {
    // 组件卸载时移除事件监听
    window.removeEventListener('resize', handleResize)
  })

  // 获取大屏缩放比例
  const getScale = (w = 1920, h = 1080) => {
    const scaleX = window.innerWidth / w
    const scaleY = window.innerHeight / h
    return Math.min(scaleX, scaleY)
  }
  // 处理窗口大小变化
  const handleResize = () => {
    screenContent.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
</script>
<template>
  <div class="screen-container">
    <div
      class="screen-content"
      ref="screenContent"
    >
      <Top />
      <div class="screen-bottom">
        <div class="screen-left">
          <Tourist class="tourist" />
          <Gender class="gender" />
          <Age class="age" />
        </div>
        <div class="screen-center">
          <Map class="map" />
          <Line class="line" />
        </div>
        <div class="screen-right">
          <Rank class="rank" />
          <Year class="year" />
          <Couter class="couter" />
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .screen-container {
    height: 100vh;
    width: 100vw;
    background-image: url('./images/bg.png');
    background-size: cover;
  }

  .screen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform-origin: left top;
    width: 1920px;
    height: 1080px;
  }


  .screen-bottom {
    display: flex;
    height: 1040px;
  }

  .screen-left {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .screen-left .tourist {
    flex: 1.5;
  }

  .screen-left .gender {
    flex: 1;
  }

  .screen-left .age {
    flex: 1;
  }

  .screen-center {
    flex: 2;
    display: flex;
    flex-direction: column;
  }

  .screen-center .map {
    flex: 2;
  }

  .screen-center .line {
    flex: 1;
  }

  .screen-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .screen-right .rank {
    flex: 1;
  }

  .screen-right .year {
    flex: 1;
  }

  .screen-right .couter {
    flex: 1;
  }

</style>